<template>
  <div>
    <myheader></myheader>

    <section class="featured-block text-center">
      <div class="container">

        <div>
          <Breadcrumb :datas="datas"></Breadcrumb>
        </div>

        <div>
          <table>
            <tr>
              <td>用户名</td>
              <td><input type="text" v-model="username" placeholder="请输入用户名"></td>
            </tr>
            <tr>
              <td>密码</td>
              <td><input type="text" v-model="password" placeholder="请输入密码"></td>
            </tr>
            <tr>
              <td>手机号</td>
              <td><input type="text" v-model="phone" placeholder="请输入手机号"></td>
            </tr>
            <tr>
              <td>头像</td>
              <td><input type="file"></td>
            </tr>
            <tr>
              <td></td>
              <td>
                <Button @click="submit" color="blue">注册</Button>
                <Button @click="set" color="blue">重置</Button>
              </td>
            </tr>
          </table>
        </div>


      </div>
    </section>

    <mytail></mytail>
  </div>

</template>

<script>
  //导入组件
  import myheader from './myheader'
  import mytail from './mytail'

    export default {
        name: "register",
      data:function () {
        return{
          //面包屑导航变量
          datas:[{title:'首页', route: {name:'index'}}, {title:'注册页'}],
          username:'',
          password:'',
          phone:'',
        }
      },

      //注册组件标签
      components:{
          'myheader': myheader,
          'mytail': mytail,
      },
      mounted() {

      },

      methods:{
          //定义提交事件
          submit:function () {
            //非空验证
            if(this.username === ''){
              this.$Message('您输入用户名');
              return false;
            }
            if(this.password === ''){
              this.$Message('请输入密码');
              return false
            }
            if(this.phone.length < 11){
              this.$Message('手机号为空或少于11位');
              return false
            }

            //请求后台接口
            this.axios({
              url:'http://127.0.0.1:8000/register/',
              method:'get',
              params:{username:this.username, password: this.password, phone: this.phone}
            }).then(res=>{
              if(res.data.message===200){
                this.$Message(res.data.message)
              }else {
                this.$Message(res.data.message)
              }
            })
          },

          set:function () {
            this.username='';
            this.password='';
            this.phone='';
          }
      }
    }
</script>

<style scoped>
td{
  padding: 10px;
}
</style>
